<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height:200px;
				/* 边框和背景颜色：检测元素是否选中 */
				background-color: #000000;
				/* id选择器和class选择器区别?
				 id 用于页面结构搭建，class位于id中进行微调*/
			}
			#body{
				width:100%;
				height: 1000px;
				background-color: #00aaff;
			}
			#footer{
				width:100%;
				height: 200px;
				background-color: #ff557f;
			}
		</style>
	</head>
	<body>
		<!-- 选择器：抓取页面元素
		   1.元素选择器：以元素名称作为选择器抓取页面元素
		   2.伪类选择器：在其他选择器上附加效果： hover 鼠标悬停时
		                                    before 在元素前面生成文本 结合content
											after 在元素后面生成文本 结合content
			3.类选择器：以1个别名或多个别名抓取元素
			4.通用选择器：抓取页面上的所有元素，规范页面效果【盒模型 外边距 字体】
			5.id选择器：以别名形式抓取元素【唯一性，用于页面结构搭建，切片】
			语法  html 前标记id="别名"
	              css  #别名-->
				  <div id="header">页头</div>
				  <div id="body">主体</div>
				  <div id="footer">页尾</div>
				  <!-- 设置界面主体body， 页尾footer 宽度100% -->
	</body>
</html>